<template>
  <div class="box">
    <van-tabbar route v-model="ac"  active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item  v-for="item in arr "
      :key="item.active"
     :to="item.pth"
     
      >
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
 data() {
    return {
      ac:0,
      arr:[
        {
          active: 0,
          title: "影院",
          pth:'/',
          icon: {
           active: require("../assets/images/movie_.png"),
            inactive: require("../assets/images/movie.png"),
          },
        },
        {
          active: 1,
          title: "视频",
           pth:'/shiPing',
          icon: {
            active: require("../assets/images/video_.png"),
            inactive: require("../assets/images/video.png"),
          },
        },
         {
          active: 2,
          title: "小视频",
           pth:'/min-shiPing',

          icon: {
            active: require("../assets/images/sVideo_.png"),
            inactive: require("../assets/images/sVideo.png"),
          },
        },
        //  {
        //   active: 3,
        //   title: "演出",
        //    pth:'/yanChu',

        //   icon: {
        //    active: require("../assets/images/show_.png"),
        //     inactive: require("../assets/images/show.png"),
        //   },
        // },
         {
          active: 3,
          title: "我的",
           pth:'/woDe',

          icon: {
            active: require("../assets/images/user_.png"),
            inactive: require("../assets/images/user.png"),
          },
        },
      ],
      
    };
  },
  created(){
    
  }
};
</script>
<style lang="less" scoped>
  .box{
    .active{
      color: red;
    }
    width: 100%;
  }
</style>